<template>
	<div class="about">
		<h1>分类列表</h1>
		<el-table :data="items" border>
			<el-table-column prop="_id" label="ID"></el-table-column>
			<el-table-column prop="parent.name" label="上级分类"></el-table-column>
			<el-table-column prop="name" label="分类名称"></el-table-column>
			<el-table-column fixed="right" label="操作" width="100">
				<template slot-scope="scope">
					<el-button type="text" size="small" @click="$router.push(`/categories/edit/${scope.row._id}`)">编辑</el-button>
					<el-button type="text" size="small" @click="remove(scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				items: []
			}
		},

		methods: {
			async fetch() {
				const res = await this.$http.get('rest/categories')
				this.items = res.data
			},
			async remove(row) {
				this.$confirm(`此操作将永久删除该分类${row.name}, 是否继续?`, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(async () => {
					await this.$http.delete(`rest/categories/${row._id}`)
					this.$message({
						type: 'success',
						message: '删除成功!'
					});
					this.fetch()
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			}
		},
		created() {
			this.fetch()
		}
	}
</script>

<style>
</style>
